<template>
    <div style="font-size: 13px;height: 100%">
        <div class="header">
          <div class="company-title">
            <div class="title-left">
              <i class="icon-fanhui goback" @click="goBack()"></i>
              <img :src="companyInfo.logoUrl" alt="" class="headimg" v-if="companyInfo.logoUrl != ''">
              <span v-if="companyInfo.logoUrl == ''" class="custDefaultTitle">{{companyInfo.fullname.slice(0,1)}}</span>
              <div class="company-name">
                <span class="company-label">{{companyInfo.fullname}}</span>
                <el-rate
                  style="margin-top: 5px"
                  :disabled="type !== 'my'"
                  @change="(value)=>changeRate(companyInfo.id, value)"
                  v-model="companyInfo.gradeType"></el-rate>
              </div>
            </div>
            <div class="title-right">
              <el-button size="small" @click="editCompany()" v-if="type == 'my'">&nbsp;编辑&nbsp;</el-button>
              <el-button size="small" @click="getCustomerInfo" v-if="type !== 'common'">来往邮件</el-button>
              <el-button size="small" @click="sendMail()" v-if="type !== 'common'">发送邮件</el-button>
            </div>
          </div>
          <editCompany  @updata="updataCompany" title="编辑客户" :id="custid" ref="editCompany"></editCompany>
          <DialogLinker ref="dialogLinker"></DialogLinker>

          <div class="company-content">
            <el-row :gutter="20">
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">所属国家：</span>
                <span> {{companyInfo.countryName}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">公司地址：</span>
                <span> {{companyInfo.addrs}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">公司电话：</span>
                <span> {{companyInfo.tel}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">公司传真：</span>
                <span> {{companyInfo.fax}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">主营业务：</span>
                <span> {{companyInfo.industryName}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">所属行业：</span>
                <span> {{companyInfo.belongTo}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">业务员：</span>
                <span> {{companyInfo.managerName}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">公司网址：</span>
                <span> {{companyInfo.website}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">营业额：</span>
                <span> {{companyInfo.turnOverName}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">雇员数：</span>
                <span> {{companyInfo.personName}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">客户类型：</span>
                <span> {{companyInfo.bussTypeName}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">客户分组：</span>
                <span> {{companyInfo.typeName}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">客户来源：</span>
                <span> {{companyInfo.resource}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">建档时间：</span>
                <span> {{companyInfo.createTime}}</span>
              </div></el-col>
              <el-col :span="6"><div class="header_item textHid">
                <span class="header_lable">客户备注：</span>
                <span> {{companyInfo.remarks}}</span>
              </div></el-col>
              <el-col :span="6" v-for="(item,index) in diyList" :key="index"><div class="header_item textHid">
                <span class="header_lable">{{item.name}}：</span>
                <span> {{companyInfo[item.field]}}</span>
              </div></el-col>
              <el-col :span="24"><div class="header_item">
                <span class="header_lable">客户标签：</span>
                <div style="display:inline-block;" class="item_lebel">
                  <el-tag v-for="(item,index) in companyInfo.custMarkDtos" :closable="type== 'my'" :key="index" :style="{backgroundColor: item.markColor}" style="color: white;margin: 5px" @close="unlabel(companyInfo.id,item.markId)">{{item.markName}}</el-tag>
                  <el-button type="text"  v-if="type == 'my'" @click="markDialog = true">添加标签</el-button>
                </div>
              </div></el-col>
            </el-row>
          </div>
        </div>

      <el-dialog
        :visible.sync="markDialog"
        width="450px"
        center
        style="font-size: 13px"
        :close-on-click-modal="false"
        @close="cancelMark"
        append-to-body>
        <span slot="title" class="dialog-title">
          <span style="color:#2A97F9">标记客户</span>
        </span>
        <div style="height: 100px">
          <div class="flex">
            <span>标记为：</span>
            <el-select v-model="markArr" multiple placeholder="请选择" size="small" @change="openAddMark" v-if="markDialog">
              <el-option
                v-for="item in markList"
                :key="item.id"
                :label="item.markName"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelMark">取 消</el-button>
          <el-button type="primary" @click="custSaveMark">确 定</el-button>
        </span>
      </el-dialog>

      <!--  新建标签并标记  -->
      <el-dialog :visible.sync="label_show" center append-to-body width="450px" :close-on-click-modal="false" @close="cancelLabel"
                 style="font-size:13px">
        <p slot="title" class="dialog-title">标签</p>
        <div class="flex">
          <span>标签名称：</span>
          <el-input v-model="markName" autocomplete="off" style="width:230px" maxlength="10"></el-input>
          <el-color-picker
            v-model="colorBg"
            :predefine="colorArray">
          </el-color-picker>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelLabel" size="small">取 消</el-button>
          <el-button type="primary" @click="addMark" size="small">确 定</el-button>
        </div>
      </el-dialog>

        <div class="content">
              <div class="tab">
                <el-tabs v-model="activeLeftName" class="left-tab" @tab-click="leftClick">
                  <el-tab-pane label="跟进记录" name="follow">
<!--   type: common(公海) subordinate(下属) 共享客户（share） my(我的客户)               -->
                    <detail-follow :id="$route.params.id" :options="companyInfo.custLinkDtos" ref="follow" :type="type"></detail-follow>
                  </el-tab-pane>
                  <el-tab-pane label="相关订单" name="aboutOrder">
                    <about-order :id="companyInfo.id" ref="aboutOrder"></about-order>
                  </el-tab-pane>
                  <el-tab-pane label="邮件统计" name="mailTab">
                    <mail-tab :id="companyInfo.id" ref="mailTab"></mail-tab>
                  </el-tab-pane>
                  <el-tab-pane label="订单统计" name="orderTab">
                    <order-tab :id="companyInfo.id" ref="orderTab"></order-tab>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div style="" class="right-tab">
                <el-tabs v-model="activeRightName" @tab-click="rightClick">
                  <el-tab-pane label="联系人信息" name="contacts">
                    <contact :custLinkDtos="companyInfo.custLinkDtos" :custForm="companyInfo" :id="companyInfo.id" ref="contacts" :type="type" @refresh="init"></contact>
                  </el-tab-pane>
                  <el-tab-pane label="操作记录" name="operationList">
                    <div style="margin-top:20px">
                      <operation-list ref="operationList" :id="companyInfo.id"></operation-list>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
        </div>
    </div>
</template>

<script>
  import mailTab from '@/components/customer/statistics/mail'
  import orderTab from '@/components/customer/statistics/order'
  import aboutOrder from '@/components/customer/aboutOrder'
  import detailFollow from '@/components/customer/detailFollow'
  import contact from '@/components/customer/contact'
  import operationList from '@/components/customer/operationList'
  import editCompany from '@/components/customer/company'
  import DialogLinker from '@/components/customer/dialogLinker'
  import {queryCust, delMarkCust, changeRate, markCust,queryCustMark, saveCustMark} from '@/api/customer'
  import {getCustomerEmail} from '@/util/util'
  import {mapGetters, mapState} from 'vuex'
  import {getList} from '@/api/system/set'
  export default {
        name: "newDetail",
        data() {
            return {
                type:'',
                jurisdiction:{}, // 权限集合
                custid:'',
                companyInfo:{
                    id:'',
                    logoUrl:'',
                    fullname:'111',
                    gradeType:0,
                    custMarkDtos:[],
                    custLinkDtos:[]
                },
                activeLeftName:'follow',
                activeRightName:'contacts',
                operationList:[],
                markDialog:false,
                markArr:[],
                markList:[],
                label_show:false,
                markName:'',
                colorArray: ['#000000', '#BE5957', '#DA762F', '#139891', '#4A669F', '#595AC1', '#333333', '#E63C38', '#EC994D', '#5DBD7F', '#5B87ED', '#8D50BF', '#7B8291', '#F07A79', '#E3AE02', '#7EC65E', '#45A7EE', '#ACACAC'],
                colorBg:'#000000',
                diyList: []
            }
        },
        components:{
            mailTab,
            orderTab,
            aboutOrder,
            detailFollow,
            contact,
            operationList,
            editCompany,
            DialogLinker
        },
        computed:{
          ...mapGetters(["permission"]),
          ...mapState(['common']),
        },
        created() {
            this.jurisdiction = this.vaildData(this.permission)
            if(this.$route.path.indexOf('shareDetail') > -1) {
                this.type = 'share'
            }
            if(this.$route.path.indexOf('myDetail') > -1) {
                this.type = 'my'
            }
            if(this.$route.path.indexOf('commonDetail') > -1) {
                this.type = 'common'
            }
            if(this.$route.path.indexOf('subordinateDetail') > -1) {
                this.type = 'subordinate'
            }
        },
        mounted() {
            this.custid = this.$route.params.id
            this.init()
            this.getMarkList()
            this.$nextTick(() => {
                this.$refs.follow.init()
            })
            this.getDiyList()
        },
        methods:{
            init() {
                queryCust(this.custid).then(res => {
                    this.companyInfo = res.data.data
                    this.companyInfo.gradeType = (this.companyInfo.gradeType != '') ? this.companyInfo.gradeType : 0
                })
            },
            getDiyList() {
                getList().then(res => {
                    let data = res.data.data
                    data.forEach(value => {
                        if(value.isSelf == 1) {
                            this.diyList.push(value)
                        }
                    })
                })
            },
            getMarkList() {
                queryCustMark(this.userId).then((res) => { // 请求标记的数组
                    this.markList = res.data.data
                    var obj ={
                        corpid: "000000",
                        custid: "",
                        id: -1,
                        markName: "+新建标签",
                    }
                    this.markList.push(obj)
                })
            },
            changeRate(value, rate) {
              // 更改客户评级
                changeRate(value, rate).then(res => {
                    if (res.data.success) {
                        this.$message({
                            message:res.data.msg,
                            type: 'success'
                        })
                        this.init()
                    }
                })
            },
            openAddMark() {
                if(this.markArr.includes(-1)) {
                    this.markArr= []
                    this.label_show = true
                    this.markDialog = false
                }
            },
            editCompany() {
                /** 编辑客户 **/
                this.custid = this.$route.params.id
                this.$refs.editCompany.getInit(this.custid);
            },
            updataCompany(value) {
                if(value) {
                    this.init()
                }
                this.$refs.editCompany.dialogFrom = false
            },
            getCustomerInfo() {
                queryCust(this.$route.params.id).then(res => {
                    if (res.data.success) {
                        let link = res.data.data.custLinkDtos;
                        let result = []
                        if (link.length > 0) {
                            link.map(item => {
                                result.push(item.email)
                            })
                            //区分是下属还是普通我的
                            getCustomerEmail(result,{userId:this.companyInfo.userid},this.type=='subordinate'?0:1)
                        } else {//没有邮箱 - 不需要跳转
                            this.$message({
                                message: '该用户未绑定邮箱，暂无往来邮件',
                                type: "success"
                            });
                        }
                    }
                })
            },
            sendMail(item) { // 发送邮件
                if (this.common.emailList.length == 0) {
                    this.$confirm(' <div style="margin: 20px 10px;">\n' +
                        '        <p style="line-height: 30px;\n' +
                        '        font-size: 14px;">您需要先绑定自己的常用邮箱到我们的平台，才可以使用邮件模块功能哦！</p>\n' +
                        '        <p style="line-height: 30px;\n' +
                        '        font-size: 14px;">点击下方的按钮即可立即去绑定。</p>\n' +
                        '      </div>', '邮箱绑定提醒', {
                        dangerouslyUseHTMLString: true,
                        confirmButtonText: '去绑定',
                        cancelButtonText: '取 消',
                    }).then(()=>{
                        this.$store.commit('SET_CURRENTSETFRAG', 'eight')
                        this.$router.push('/mail/administration');
                    }).catch(()=>{})
                    return;
                }else{
                    let target  = JSON.parse(JSON.stringify(this.companyInfo))
                    target=Object.assign({},target,{custLinkVos:this.companyInfo.custLinkDtos})
                    this.$refs.dialogLinker.init([target])
                }
            },
            unlabel(custId,markId) {
                /** 取消标签 **/
                delMarkCust(custId,markId).then((res) => {
                    if(res.data.success) {
                        this.init()
                    }
                })
            },
            cancelMark() { // 标记为弹框关闭
                this.markDialog = false
                this.markArr = []
            },
            cancelLabel() {
                this.label_show = false
                this.markName = ''
                this.colorBg = '#000000'
            },
            custSaveMark() {
                markCust(this.$route.params.id,this.markArr.join(',')).then(res => {
                    this.markArr = []
                    this.$message({
                        type:'success',
                        message: res.data.msg
                    })
                    // 重新请求数据
                    this.init()
                })
                this.markDialog = false
            },
            addMark() {
                saveCustMark(this.colorBg, this.markName, this.userId).then((res) => {
                    if(res.data.success) {
                        this.markName = ''
                        this.colorBg = ''
                        this.label_show = false

                        queryCustMark(this.userId).then((res) => { // 请求标记的数组
                            this.markList = res.data.data
                            var nowMarkId =  this.markList[this.markList.length -1].id

                            markCust(this.$route.params.id,nowMarkId).then(res => {
                                this.markArr = []
                                this.$message({
                                    type:'success',
                                    message: res.data.msg
                                })
                                // 重新请求数据
                                var obj ={
                                    corpid: "000000",
                                    custid: "",
                                    id: -1,
                                    markName: "+新建标签",
                                }
                                this.markList.push(obj)

                                this.init()
                            })
                        })
                    }
                })
            },
            pickerFocus() {
                this.timeDefault = new Date()
            },
            submit() {
                console.log('提交跟进')
            },
            leftClick(tab) {
                /** 请求数据 **/
                switch (tab.name) {
                    case 'follow':
                        this.$refs.follow.init()
                        break;
                    case 'aboutOrder':
                        this.$refs.aboutOrder.init()
                        break;
                    case 'mailTab':
                        this.$refs.mailTab.init()
                        break;
                    case 'orderTab':
                        this.$refs.orderTab.init()
                        break;
                }
            },
            rightClick(tab) {
                switch (tab.name) {
                    case 'operationList':
                        this.$refs.operationList.init()
                        break;
                }
            },
            goBack() {
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped lang="scss">
  .el-scrollbar__view{
    height:100%;
    overflow: hidden;
  }
  .header{
    border-radius: 20px;
    margin: 10px;
    background-color: white;
  }
  .flex{
    display: flex;
    align-items: center;
  }
  .content{
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    height: calc(100% - 300px);
  }
  .tab{
    background-color: white;
    border-radius: 20px;
    width: calc(100% - 300px);
    overflow: auto;
  }
  .right-tab{
    background-color: white;
    margin: 0 10px;
    margin-right: 0;
    border-radius: 20px;
    width: 280px;
    overflow: auto;
    box-sizing: border-box;
    padding-right: 10px;
  }
  .goback{
    color:#409eff;
    display:inline-block;
    top: 20px;
    left: 15px;
    cursor: pointer;
    font-size: 24px !important;
  }
  .company-title{
    padding: 20px 20px 10px 10px;
    display: flex;
    justify-content: space-between;
  }
  .company-name{
    display: inline-block;
    vertical-align: middle;
  }
  .company-label{
    font-weight: 600;
    font-size: 15px;
  }
  .left-tab{
    padding: 0 20px;
  }
  .headimg{
    width:42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #409eff;
    vertical-align: middle;
    margin:0 10px
  }
  .custDefaultTitle{
    display: inline-block;
    background:#325893;
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin: 0 10px;
    text-align: center;
    line-height: 42px;
  }
  .company-content{
    padding-left: 90px;
  }
  .header_item{
    line-height: 40px;
    display: flex;
  }
  .contact{
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: 10px;
    align-items: center;
    span{
      font-weight: 600;
    }
  }
  .card{
    background: #E9F3FD;
    border-radius: 8px;
    padding :13px;
    margin:8px 25px;
  }
  .title{
    display: flex;
    justify-content: space-between;
  }
  .editContacts{
    font-size: 20px;
    cursor: pointer;
  }
  .header_lable{
    display: inline-block;
    font-weight: 600;
    font-size: 13px;
    width: 75px;
    flex: 0 0 75px;
  }
</style>
